/* ==========================================================
   Expertise in Delivery: The Right Specialists, Stage by Stage
   File: wwwroot/css/leadership-stages.css
   Used by: Views/Partials/blocklist/Components/leadershipStagesBlock.cshtml
   ========================================================== */
.ld-stg {
  --ls-navy: #14256b;
  --ls-orange: #ff9a45;
  --ls-gutter: 4.2vw;
  --ls-ease: cubic-bezier(.65, 0, .35, 1);
  --ls-ease-out: cubic-bezier(.16, 1, .3, 1);
  --step: 2.2s;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background: #0b1230;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
.ld-stg *, .ld-stg *::before, .ld-stg *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- background ---------- */
.ld-stg__bg { position: absolute; inset: 0; z-index: -2; }
.ld-stg__bg img, .ld-stg__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-stg__bg video { z-index: 1; }
.ld-stg__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 14, 40, .78) 0%, rgba(8, 14, 40, .45) 30%, rgba(8, 14, 40, .05) 60%, rgba(8, 14, 40, .1) 100%),
    linear-gradient(180deg, rgba(8, 14, 40, .35) 0%, rgba(8, 14, 40, 0) 35%, rgba(8, 14, 40, .1) 70%, rgba(8, 14, 40, .45) 100%);
}

/* ---------- layout ---------- */
.ld-stg__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(560px, 54.4vw, 1400px);
  padding: clamp(24px, 2.4vw, 64px) var(--ls-gutter) clamp(36px, 6vw, 156px);
}
.ld-stg__head { max-width: 34em; }
.ld-stg__eyebrow { margin-bottom: clamp(10px, 1.4vw, 36px); font-size: clamp(11px, .9vw, 22px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ld-stg__heading { font-size: clamp(24px, 2.25vw, 58px); font-weight: 600; line-height: 1.3; color: #fff; }
.ld-stg__intro {
  max-width: 32em;
  margin-top: clamp(10px, 1.3vw, 34px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .9vw, 23px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .9);
}

/* ---------- arrow cards ---------- */
.ld-stg__cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(24px, 3vw, 80px);
  margin-right: 1.5vw;
}
.ld-stg__card {
  position: relative;
  display: flex;
  min-height: clamp(150px, 15.8vw, 400px);
  outline: none;
  cursor: default;
}
/* glass + glow are cut to the arrow shape */
.ld-stg__glass,
.ld-stg__glow {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
}
.ld-stg__glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 55%, rgba(255, 255, 255, .06) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  backdrop-filter: blur(9px) saturate(1.15);
}
/* warm wash on the active card */
.ld-stg__glow {
  background: linear-gradient(120deg, rgba(255, 154, 69, .5) 0%, rgba(255, 154, 69, .26) 45%, rgba(255, 154, 69, .08) 100%);
  opacity: 0;
  transition: opacity .8s ease;
}
.ld-stg__card.is-active .ld-stg__glow { opacity: 1; }
.ld-stg__edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ld-stg__edge polygon { fill: none; stroke: rgba(255, 255, 255, .38); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .8s ease; }
.ld-stg__card.is-active .ld-stg__edge polygon { stroke: rgba(255, 190, 130, .85); }
.ld-stg__edge--v { display: none; }

.ld-stg__content {
  position: relative;
  flex: 1;
  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);   /* line stops exactly at the arrow edge */
  padding: clamp(14px, 1.3vw, 34px) 26% clamp(14px, 1.4vw, 36px) clamp(12px, 1.4vw, 36px);
}
.ld-stg__num { display: block; font-size: clamp(18px, 1.75vw, 46px); font-weight: 300; line-height: 1; color: #fff; }

/* the flow line: thin track, orange fill runs from the dot to the arrow tip */
.ld-stg__track {
  position: relative;
  display: block;
  height: 1px;
  margin: clamp(10px, 1.1vw, 28px) -30% clamp(10px, 1.1vw, 28px) calc(-1 * clamp(12px, 1.4vw, 36px));
  background: rgba(255, 255, 255, .4);
}
.ld-stg__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--ls-orange), #ffc58f);
  box-shadow: 0 0 8px rgba(255, 154, 69, .8);
  transform: scaleX(0);
  transform-origin: left center;
}
.ld-stg__dot {
  position: absolute;
  left: clamp(12px, 1.4vw, 36px);
  top: 50%;
  width: clamp(7px, .6vw, 15px);
  height: clamp(7px, .6vw, 15px);
  border-radius: 50%;
  background: var(--ls-orange);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(255, 154, 69, .6);
}
.ld-stg__card.is-active .ld-stg__dot { animation: ld-stg-pulse 1.4s ease-out infinite; }
@keyframes ld-stg-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 154, 69, .65); }
  100% { box-shadow: 0 0 0 9px rgba(255, 154, 69, 0); }
}
/* running: the fill sweeps across in --step; done: stays full */
.ld-stg__card.is-flowing .ld-stg__fill { transform: scaleX(1); transition: transform var(--step) linear; }
.ld-stg__card.is-done .ld-stg__fill { transform: scaleX(1); transition: transform .4s ease; }
.ld-stg__card:not(.is-flowing):not(.is-done) .ld-stg__fill { transition: transform .6s var(--ls-ease); }

.ld-stg__title { font-size: clamp(13px, 1.05vw, 27px); font-weight: 600; line-height: 1.3; color: #fff; }
.ld-stg__text {
  margin-top: clamp(8px, .9vw, 22px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(11.5px, .8vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}

/* ---------- entrance: cards arrive one by one, 1 → 5, each sliding out from behind the one before ---------- */
.ld-stg.js-reveal .ld-stg__fx { opacity: 0; transform: translateY(20px); }
.ld-stg.js-reveal.is-visible .ld-stg__fx { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s var(--ls-ease-out); }
.ld-stg.js-reveal .ld-stg__card {
  opacity: 0;
  transform: translateX(-45%) scale(.96);
  clip-path: inset(0 100% 0 0);
}
.ld-stg.js-reveal.is-visible .ld-stg__card {
  opacity: 1;
  transform: none;
  clip-path: inset(0 -10% 0 0);
  transition:
    opacity .5s ease calc(.35s + var(--ci, 0) * .22s),
    transform .9s var(--ls-ease-out) calc(.35s + var(--ci, 0) * .22s),
    clip-path .9s var(--ls-ease-out) calc(.35s + var(--ci, 0) * .22s);
}
/* earlier cards sit above later ones so each new card slides out from behind */
.ld-stg__card { z-index: calc(10 - var(--ci, 0)); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ld-stg { --ls-gutter: 32px; }
  .ld-stg__cards { margin-right: 0; }
  .ld-stg__content { padding-right: 24%; }
}
@media (max-width: 900px) {
  .ld-stg { --ls-gutter: 24px; }
  .ld-stg__shade { background: linear-gradient(180deg, rgba(8, 14, 40, .8) 0%, rgba(8, 14, 40, .45) 40%, rgba(8, 14, 40, .65) 100%); }
  .ld-stg__inner { min-height: 0; }
  /* cards stack and point down */
  .ld-stg__cards { grid-template-columns: 1fr; gap: 0; max-width: 520px; }
  .ld-stg__card { min-height: 0; margin-bottom: -6px; }
  .ld-stg__glass, .ld-stg__glow, .ld-stg__content { clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); }
  .ld-stg__edge { display: none; }
  .ld-stg__edge--v { display: block; }
  .ld-stg__content { padding: 16px 18px 30px; }
  .ld-stg__track { margin: 10px -18px 12px; }
  .ld-stg__dot { left: 18px; }
  .ld-stg.js-reveal .ld-stg__card { transform: translateY(-30%) scale(.97); clip-path: inset(0 0 100% 0); }
  .ld-stg.js-reveal.is-visible .ld-stg__card { clip-path: inset(0 0 -10% 0); }
}
@media (max-width: 560px) { .ld-stg { --ls-gutter: 20px; } }